<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>vue router的重定向</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 导入vue-router文件,为全局的window对象挂载VueRouter构造函数 -->
    <script src="js/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <router-link to="/index">首页</router-link>
      <router-link to="/keji">科技</router-link>
      <router-view></router-view>
    </div>
    <script>
      const Index = {
        template: `<h1>主页内容</h1>`,
      };

      const Keji = {
        template: `
        <div>
           <h1>科技内容</h1>
           <hr>
           <!--子级路由-->
           <router-link to="/keji/car">汽车</router-link>
           <router-link to="/keji/phone">手机</router-link>
           <!--子级路由的占位符-->
           <router-view></router-view>
        </div>
        `,
      };

      const Car = {
        template: `<h2>汽车科技</h2>`,
      };

      const Phone = {
        template: `<h2>移动科技</h2>`,
      };

      //创建路由实例对象
      const router = new VueRouter({
        //配置路由的规则
        routes: [
          { path: "/", redirect: "/index" },
          { path: "/index", component: Index },
          {
            path: "/keji",
            component: Keji,
            children: [  //children是配置当前路由的子路由的规则
              { path: "/keji/car", component: Car },
              { path: "/keji/phone", component: Phone },
            ],
          },
        ],
      });

      //1. 实例化一个Vue的实例
      let vm = new Vue({
        el: "#app",
        data: {},
        //挂载路由对象
        router: router,
      });
    </script>
  </body>
</html>
